<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/mist-list/mist-list.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<link rel="import" href="stacks/stack-create.html">
<link rel="import" href="stacks/stack-page.html">
<link rel="import" href="stacks/stack-actions.html">
<link rel="import" href="helpers/owner-filter-behavior.html">


<dom-module id="page-stacks">
    <template>
        <style include="shared-styles">
            [hidden] {
                display: none !important;
            }
            mist-list::slotted(.error) {
                color: var(--red-color);
            }
        </style>
        <app-route route="{{route}}" pattern="/:stack" data="{{data}}"></app-route>
        <template is="dom-if" if="[[_isListActive(route.path)]]" restamp>
            <stack-actions id="actions" items="[[selectedItems]]" actions="{{actions}}" user="[[model.user.id]]" members="[[model.membersArray]]" org="[[model.org]]">
                <mist-list selectable resizable column-menu multi-sort
                id="stacksList"
                apiurl="/api/v1/stacks"
                item-map="[[model.stacks]]"
                name="Stacks"
                selected-items="{{selectedItems}}"
                filtered-items-length="{{filteredItemsLength}}"
                combined-filter={{combinedFilter}}
                frozen=[[_getFrozenColumn()]]
                visible=[[_getVisibleColumns()]]
                renderers=[[_getRenderers()]]
                route={{route}}
                user-filter=[[model.sections.stacks.q]]
                primary-field-name="id"
                filter-method="[[_ownerFilter()]]"
                actions="[[actions]]">
                    <p slot="no-items-found">No stacks found.</p>
                </mist-list>
            </stack-actions>
        </template>
        <stack-create model="[[model]]" section="[[model.sections.stacks]]" params="[[route.__queryParams]]" hidden$=[[!_isAddPageActive(route.path)]]></stack-create>
        <stack-page model="[[model]]" stack="[[_getStack(data.stack, model.stacks, model.stacks.*)]]" resource-id="[[data.stack]]" section="[[model.sections.stacks]]" hidden$=[[!_isDetailsPageActive(route.path)]]></stack-page>
    </template>
    <script>
    Polymer({
        is: 'page-stacks',
        behaviors: [
            ownerFilterBehavior,
            rbacBehavior
        ],

        properties: {
            model: {
                type: Object
            },
            ownership: {
                type: Boolean
            },
            actions: {
                type: Array,
                notify: true
            },
            selectedItems: {
                type: Array,
                notify: true
            }
        },

        listeners: {},
        _isAddPageActive: function(path) {
            return path.split('?')[0] == '/+create';
        },
        _isDetailsPageActive: function(path) {
            return path && path.split('?')[0] != '/+create';
        },
        _isListActive: function(path) {
            return !path;
        },
        _getStack: function(id) {
            if (this.model.stacks) {
                return this.model.stacks[id];
            }
        },
        _addResource: function(e) {
            this.dispatchEvent(new CustomEvent('go-to', { bubbles: true, composed: true, detail: {
                url: this.model.sections.stacks.add
            } }));
        },
        _getFrozenColumn: function() {
            return ['name'];
        },

        _getVisibleColumns: function() {
            var ret = ['template', 'status', 'created_by', 'tags'];
            if (this.model.org && this.model.org.ownership_enabled == true)
                ret.splice(ret.indexOf('created_by'), 0, 'owned_by');
            return ret;
        },

        _getRenderers: function(stacks, templates) {
            var _this = this;
            return {
                'name': {
                    'body': function(item, row) {
                        return '<strong class="name">' + item + '</strong>';
                    }
                },
                'template': {
                    'body': function(item, row) {
                        if (_this.model && _this.model.templates)
                            return _this.model.templates[item] ? _this.model.templates[item].name :
                                'missing template';
                        else
                            return '';
                    }
                },
                'owned_by': {
                    'title': function(item, row) {
                        return 'owner';
                    },
                    'body': function(item, row) {
                        return _this.model.members[item] ? _this.model.members[item].name || _this.model.members[item].email || _this.model.members[item].username : '';
                    }
                },
                'created_by': {
                    'title': function(item, row) {
                        return 'created by';
                    },
                    'body': function(item, row) {
                        return _this.model.members[item] ? _this.model.members[item].name || _this.model.members[item].email || _this.model.members[item].username : '';
                    }
                },
                'status': {
                    'body': function(item, row) {
                        if (item == "error") {
                            return "<span class='error'>" + item.charAt(0).toUpperCase() + item.slice(
                                1); + "</span>";
                        } else {
                            return item ? item.replace(/_/g, " ") : '';
                        }
                    }
                },
                'tags': {
                    'body': function(item, row) {
                        var tags = item,
                            display = "";
                        for (key in tags) {
                            display += "<span class='tag'>" + key;
                            if (tags[key] != undefined && tags[key] != "")
                                display += "=" + tags[key];
                            display += "</span>";
                        }
                        return display;
                    }
                }
            }
        }
    });
    </script>
</dom-module>